<template>
  <div id="app">
    <router-view></router-view>
    <div id="footer">
        <span class="footer-nav"
        :class="{active: activeNav === 0}">
          <router-link to="../../recharge/1/">办理</router-link>
        </span>
        <span class="footer-nav"
        :class="{active: activeNav === 1}">
           <router-link to="../../history">记录</router-link>
        </span>
        <span class="footer-nav"
        :class="{active: activeNav === 2}">
          <router-link to="../../help">帮助</router-link>
        </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){
    return{
      activeNav:''
    }
  },
  mounted(){
    this.getActiveNav();
    console.log(this.$route)
  },
  methods:{
    getActiveNav(){
      switch(this.$route.path) {
        case '/':
          this.activeNav = 0;
          break;
        case '/recharge':
          this.activeNav = 0;
          break;
        case '/history':
          this.activeNav = 1;
          break;
        case '/help':
          this.activeNav = 2;
          break;
        default:
          this.activeNav = 0;
          break;
      }
    }
  },
  watch:{
    '$route'(){
       this.getActiveNav();
    }
  }
}
</script>
<style lang='less' scoped>
  #footer{
    position: fixed;
    width: 100%;
    height: 1.33rem;
    box-shadow:0px -1px 0px 0px #d3d3d3;
    bottom: 0;
    left: 0;
    background: #fff;
    .footer-nav{
      float: left;
      width:33%;
      text-align: center;
      a{
        font-size:0.27rem;
        color:#AEAEAE;
        letter-spacing:0.4px;
        background-repeat: no-repeat;
        background-size: 0.7rem .7rem;
        text-align: center;
        width: 0.7rem;
        display: inline-block;
        padding-top: .7rem;
        text-align: center;
        margin-top: .15rem;
      }
      &:nth-of-type(1) a{
        background-image: url(./assets/img/icon_banli@3x.png);
      }
      &:nth-of-type(2) a{
        background-image: url(./assets/img/icon_jilu@3x.png);
      }
      &:nth-of-type(3) a{
        background-image: url(./assets/img/icon_bangzhu@3x.png);
      }
      &.active{
        & a{
          color: #ff891d;
        }
        &:nth-of-type(1) a{
          background-image: url(./assets/img/icon_banli_selected@3x.png);
        }
        &:nth-of-type(2) a{
          background-image: url(./assets/img/icon_jilu_selected@3x.png);
        }
        &:nth-of-type(3) a{
          background-image: url(./assets/img/icon_bangzhu_selected@3x.png);
        }
      }
    }
  }
</style>
